

import {useRef} from 'react';


/**
 * React组件获取/操作Dom，需要使用useRef钩子函数，分为两步
 * 
 * 1.使用useRef创建ref对象，并于JSX绑定
 * 
 * const inputRef  = useRef(null)
 * <input type="text" ref={inputRef}/>
 * 
 * 2.DOM可用时，通过inputRef:current拿到DOM对象
 * console.log(inputRef.current)
 * 
 * Dom可用：渲染完毕之后    dom生成之后
 */



function App() {
  
  const inputRef = useRef(null)

  function showDom(){
    console.dir(inputRef.current)
  }
  return (
  <div className="App">
      <input tupe="text" ref={inputRef}/>
      <button onClick={showDom}>获取Dom</button>
  </div>
);
}

export default App;
